<template>
	<view class="container">
		<customNavigation title="执行检查" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png"
		 color="white" background="#32A238"></customNavigation>
		<view class="main">
			<view class="top">
				<view class="topLeft">
					<view class="tipText">
						检查内容
					</view>
					<image src="../../static/images/zxjc_icon_right.png" mode=""></image>
					<view class="carBand">
						{{detail.tNumber}}
					</view>
				</view>
				<view class="topRight">
					<view class="checkName">
						检查员：{{detail.uName}}
					</view>
					<image @click="changeBox" class="changeIcon" src="../../static/images/zxjc_icon_qh.png" mode=""></image>
				</view>
			</view>
			<scroll-view class="form" scroll-y="true" v-if="selectOne">
				<view class="formTop">
					<view class="formTopLeft">
						第 {{index+1}} 项，共 {{detail.TaskDetailList.length}} 项
					</view>
					<view class="formTopRight">
						已发现异常&nbsp<text>{{abnormalNum}}</text>&nbsp处
					</view>
				</view>
				<view class="formBox">
					<view class="item">
						<view class="itemName">
							检查对象：
						</view>
						<view class="itemText">
							{{detail.TaskDetailList[index].inspectionObject}}
						</view>
					</view>
					<view class="item">
						<view class="itemName">
							检查部位：
						</view>
						<view class="itemText">
							{{detail.TaskDetailList[index].inspectionBw}}
						</view>
					</view>
					<view class="item">
						<view class="itemName">
							核实内容：
						</view>
						<view class="itemText2">
							{{detail.TaskDetailList[index].inspectionContent}}
						</view>
					</view>
				</view>
				<view class="title">
					检查汇报
				</view>
				<view class="subForm">
					<view class="subItem">
						<view class="itemTitle">
							填写问题：
						</view>
						<view class="contentBox">
							<textarea class="inputText" value="" placeholder="请填写问题" @input="computedNum(index,$event)" :index="index" v-model="detail.TaskDetailList[index].desc"/>
							<view class="fileList">
								<view class="fileItem" @click="cancleBtn(index2)" v-for="(item,index2) in detail.TaskDetailList[index].attr">
									附件.{{item.fileType}}
									<image class="cancle" src="../../static/images/zxjc_icon_del.png" mode=""></image>
								</view>
								<!-- <view class="fileItem">
									附件.mp4
									<image class="cancle" src="../../static/images/zxjc_icon_del.png" mode=""></image>
								</view>
								<view class="fileItem">
									附件.mp3
									<image class="cancle" src="../../static/images/zxjc_icon_del.png" mode=""></image>
								</view> -->
							</view>
						</view>
					</view>
					<view class="uploadList">
						<view class="uploadItem" @click="uploadImg(index)">
							<image src="../../static/images/zxjc_icon_sczp.png" mode=""></image>上传照片
						</view>
						<view class="uploadItem" @click="uploadVideo(index)">
							<image src="../../static/images/zxjc_icon_scsp.png" mode=""></image>上传视频
						</view>
						<view class="uploadItem" @longpress="startRecord(index)" @touchend="endRecord(index)">
							<image src="../../static/images/zxjc_icon_scyy.png" mode=""></image>上传语音
						</view>
					</view>
				</view>
			</scroll-view>
			
			
			<scroll-view class="form" scroll-y="true" v-else>
				<view class="formItem">
					<view class="formBox" v-for="(item,index) in detail.TaskDetailList" :key="item">
						<view class="formTop">
							<view class="formTopLeft">
								第 {{index+1}} 项，共 {{detail.TaskDetailList.length}} 项
							</view>
						</view>
						<view class="item">
							<view class="itemName">
								检查对象：
							</view>
							<view class="itemText">
								{{item.inspectionObject}}
							</view>
						</view>
						<view class="item">
							<view class="itemName">
								检查部位：
							</view>
							<view class="itemText">
								{{item.inspectionBw}}
							</view>
						</view>
						<view class="item">
							<view class="itemName">
								核实内容：
							</view>
							<view class="itemText">
								{{item.inspectionContent}}
							</view>
						</view>
						<view class="subItem">
							<view class="itemTitle">
								填写问题：
							</view>
							<view class="contentBox">
								<textarea class="inputText" value="" placeholder="请填写问题" @input="computedNum(index,$event)" v-model="item.desc"/>
								<view class="fileList">
									<view class="fileItem"  @click="cancleBtn(index2)" v-for="(item2,index2) in item.attr">
										附件.{{item2.fileType}}
										<image class="cancle" src="../../static/images/zxjc_icon_del.png" mode=""></image>
									</view>
									<!-- <view class="fileItem">
										附件.mp4
										<image class="cancle" src="../../static/images/zxjc_icon_del.png" mode=""></image>
									</view>
									<view class="fileItem">
										附件.mp3
										<image class="cancle" src="../../static/images/zxjc_icon_del.png" mode=""></image>
									</view> -->
								</view>
							</view>
							<image class="uploadBox" @click="open(index)" src="../../static/images/zxjc_btn_add.png"></image>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottomList"  v-if="selectOne">
				<button class="subItem pre" @click="upBtn">
					上一项
				</button>
				<button class="subItem next" @click="nextBtn">
					下一项
				</button>
			</view>
			<view class="nextBtn" v-else @click="toSubAuto">
				下一步
			</view>
		</view>
		<uni-popup ref="popup" type="center" :animation="true">
			<view class="popupBox">
				<image class="closeIcon" @click="closeBtn" src="../../static/images/tc_icon_close.png" mode=""></image>
				<view class="uploadItem" @click="uploadImg(openIndex)">
					<image src="../../static/images/zxjc_icon_sczp.png" mode=""></image>上传照片
				</view>
				<view class="uploadItem" @click="uploadVideo(openIndex)">
					<image src="../../static/images/zxjc_icon_scsp.png" mode=""></image>上传视频
				</view>
				<view class="uploadItem" @longpress="startRecord(openIndex)" @touchend="endRecord(openIndex)">
					<image src="../../static/images/zxjc_icon_scyy.png" mode=""></image>上传语音
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from "../../utils/controller.js"
	export default {
		components:{
			customNavigation
		},
		data() {
			return {
				index:0,
				detail:"",
				selectOne:true,
				ID:"",
				abnormalNum:0,
				openIndex:0,
				audioTempFile:"",
				recordState:false,
				recorderManager:{},
				innerAudioContext:{}
			};
		},
		onLoad(options) {
			let that=this
			this.recorderManager = uni.getRecorderManager();
			this.innerAudioContext = uni.createInnerAudioContext();
			this.ID=options.ID
			this.getTaskInfo()
		},
		methods:{
			
			//开始录音
			startRecord(index){
				let that=this
				uni.authorize({
					scope:"scope.record",
					success(){
						uni.showToast({
							icon:"none",
							title:"开始录音"
						})
						that.recorderManager.start();
						that.recorderManager.onStart()
						console.log("录音执行")
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: '您未授权录音，功能将无法使用',
							showCancel: true,
							confirmText: "授权",
							confirmColor: "#52a2d8",
							success(res) {
								if(res.confirm){
									uni.openSetting({
										
									})
								}else{
									
								}
							}
						})
					}
				})
			},
			
			//结束录音
			endRecord(index){
				let that=this
				uni.stopRecord({
					success:function(e){
						that.recorderManager.stop();
						that.recorderManager.onStop((res=>{
							that.audioTempFile=res.tempFilePath
							that.uploadAudio(index)
						}))
						console.log("结束录音")
					}
				})
			},
			
			//录音点击事件
			catchRecord(){
				if(this.tapAudio==false){
					this.tapAudio=true
					this.startRecord()
				}else{
					this.tapAudio=false
					this.endRecord()
				}
			},
			//删除上传的文件
			cancleBtn(index2){
				console.log("触发")
				let index=this.index
				let list=this.detail.TaskDetailList
				list[index].attr.splice(index2,1)
				this.detail.TaskDetailList=list
			},
			//下一项
			nextBtn(){
				let that=this
				if(this.index<this.detail.TaskDetailList.length-1){
					this.index=this.index+1
				}else{
					uni.navigateTo({
						url:"/pages/subAutograph/subAutograph?id="+this.ID+"&list="+JSON.stringify(that.detail.TaskDetailList)
					})
				}
					
			},
			//上一项
			upBtn(){
				if(this.index>0){
					this.index=this.index-1
				}
			},
			//打开弹出层
			open(index){
				this.openIndex=index
				this.$refs.popup.open('bottom')
			},
			//关闭弹出层
			closeBtn(){
				this.$refs.popup.close('bottom')
			},
			
			//上传图片
			uploadImg(index){
				let that=this
				uni.chooseImage({
					count:1,
					success:function(res){
						let url=res.tempFilePaths[0]
						console.log(res)
						uni.uploadFile({
							url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
							filePath: url,
							name: 'Data',
							formData: {
							   token:uni.getStorageSync("token")             
							           },
							success: (res) => {
								console.log(res)
								let value={}
								value.ImageUrl=JSON.parse(res.data).src
								value.fileType=JSON.parse(res.data).ImageUrl.substring(JSON.parse(res.data).ImageUrl.lastIndexOf('.') + 1)
								that.detail.TaskDetailList[index].attr.push(value)
							}
						});
					},
					
				})
			},
			
			//上传视频
			uploadVideo(index){
				let that=this
				uni.chooseVideo({
					count:1,
					success:function(res){
						console.log(res)
						let url=res.tempFilePath
						uni.uploadFile({
							url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
							filePath: url,
							formData: {
							   token:uni.getStorageSync("token")             
							           },
							name: 'Data',
							success: (res) => {
								console.log(res)
								let value={}
								value.ImageUrl=JSON.parse(res.data).src
								value.fileType=JSON.parse(res.data).ImageUrl.substring(JSON.parse(res.data).ImageUrl.lastIndexOf('.') + 1)
								that.detail.TaskDetailList[index].attr.push(value)
							}
						});
					},
					
				})
			},
			
			//上传语音
			uploadAudio(index){
				console.log(index)
				let that=this
				let url=this.audioTempFile
				uni.uploadFile({
					url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
					filePath: url,
					formData: {
					   token:uni.getStorageSync("token")             
							   },
					name: 'Data',
					success: (res) => {
						uni.showToast({
							icon:"none",
							title:"结束录音"
						})
						console.log(res)
						let value={}
						value.ImageUrl=JSON.parse(res.data).src
						value.fileType=JSON.parse(res.data).ImageUrl.substring(JSON.parse(res.data).ImageUrl.lastIndexOf('.') + 1)
						that.detail.TaskDetailList[index].attr.push(value)
					}
				});
			},
			
			
			
			//获取检查内容
			getTaskInfo(){
				let value={}
				value.ID=this.ID
				api.GetTaskInfo(value).then(res=>{
					let object=res.data
					object.TaskDetailList.forEach(item=>{
						item.desc=""
						item.attr=[]
					})
					this.detail=object
				})
			},
			
			//计算异常处并修改desc
			computedNum(index,event){
				let value=event.detail.value
				this.detail.TaskDetailList[index].desc=value
				let num=0
				this.detail.TaskDetailList.forEach(item=>{
					if(item.desc){
						num=num+1
					}
				})
				this.abnormalNum=num
			},
			
			
			//切换格式
			changeBox(){
				if(this.selectOne==false){
					this.selectOne=true
				}else{
					this.selectOne=false
				}
			},
			
			//跳转签字
			toSubAuto(){
				let that=this
				uni.navigateTo({
					url:"/pages/subAutograph/subAutograph?id="+this.ID+"&list="+JSON.stringify(that.detail.TaskDetailList)
				})
			}
			
		}
	}
</script>

<style lang="less">
page{
	width: 100%;
	height: auto;
	background: #FAFAFA;
	.main{
		width: 100%;
		height: auto;
		margin-top: 11vh;
		.top{
			width: 100%;
			height: 92rpx;
			background: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			.topLeft{
				display: flex;
				align-items: center;
				.tipText{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 13rpx;
					margin-right: 13rpx;
				}
				.carBand{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			.topRight{
				display: flex;
				align-items: center;
				.checkName{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2A2A2A;
				}
				.changeIcon{
					width: 40rpx;
					height: 40rpx;
					margin-left: 30rpx;
				}
			}
		}
		.form{
			width: 100%;
			height: 78vh;
			.formItem{
				width: 100%;
				height: auto;
				.formBox{
					width: 750rpx;
					height: auto;
					background: #FFFFFF;
					padding: 30rpx 0 30rpx 0;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.formTop{
						width: 100%;
						padding: 0 30rpx 0 30rpx;
						box-sizing: border-box;
						height: 76rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #FAFAFA;
						margin-bottom: 32rpx;
						.formTopLeft{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						.formTopRight{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							text{
								color: #EB1D1D;
								margin-left: 10rpx;
								margin-right: 10rpx;
							}
						}
					}
					.item{
						width: 100%;
						height: auto;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						padding-left: 30rpx;
						padding-right: 30rpx;
						box-sizing: border-box;
						margin-bottom: 15rpx;
						.itemName{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							margin-top: 26rpx;
						}
						.itemText{
							width: 522rpx;
							height: 88rpx;
							border: 1rpx dashed #999999;
							border-radius: 10rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #2A2A2A;
							text-align: center;
							line-height: 88rpx;
							padding: 0 30rpx 0 30rpx;
							box-sizing: border-box;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.itemText2{
							width: 522rpx;
							height: 260rpx;
							border: 1rpx dashed #999999;
							border-radius: 10rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #2A2A2A;
							text-align: center;
							line-height: 260rpx;
						}
					}
					.subItem{
						width: 100%;
						height: auto;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						padding-left: 30rpx;
						padding-right: 30rpx;
						box-sizing: border-box;
						.itemTitle{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #2A2A2A;
							margin-top: 30rpx;
						}
						.contentBox{
							width: 390rpx;
							min-height: 164rpx;
							height: auto;
							background: #F5F5F5;
							border-radius: 10rpx;
							padding: 30rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.inputText{
								width: 332rpx;
								height: 64rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #2A2A2A;
							}
							.fileList{
								display: flex;
								align-items: center;
								.fileItem{
									margin-right: 20rpx;
									position: relative;
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #666666;
									white-space: nowrap;
									.cancle{
										width: 12rpx;
										height: 12rpx;
										position: absolute;
										right: -6rpx;
										top: 0rpx;
									}
								}
							}
						}
						.uploadBox{
							width: 116rpx;
							height: 162rpx;
						}
					}
				}
			}
			.formTop{
				width: 100%;
				padding: 0 30rpx 0 30rpx;
				box-sizing: border-box;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.formTopLeft{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.formTopRight{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text{
						color: #EB1D1D;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}
			}
			.formBox{
				width: 750rpx;
				height: 548rpx;
				background: #FFFFFF;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.item{
					width: 100%;
					height: auto;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					.itemName{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 26rpx;
					}
					.itemText{
						width: 522rpx;
						height: 88rpx;
						border: 1rpx dashed #999999;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #2A2A2A;
						text-align: center;
						line-height: 88rpx;
						padding: 0 30rpx 0 30rpx;
						box-sizing: border-box;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.itemText2{
						width: 522rpx;
						height: 260rpx;
						border: 1rpx dashed #999999;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #2A2A2A;
						text-align: center;
						padding: 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.title{
				width: 100%;
				height: 76rpx;
				text-align: center;
				line-height: 76rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.subForm{
				width: 100%;
				background-color: white;
				height: auto;
				padding: 30rpx;
				box-sizing: border-box;
				.subItem{
					width: 100%;
					height: auto;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					.itemTitle{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2A2A2A;
						margin-top: 30rpx;
					}
					.contentBox{
						width: 522rpx;
						min-height: 164rpx;
						height: auto;
						background: #F5F5F5;
						border-radius: 10rpx;
						padding: 30rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.inputText{
							width: 462rpx;
							height: 64rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #2A2A2A;
						}
						.fileList{
							display: flex;
							align-items: center;
							.fileItem{
								margin-right: 20rpx;
								position: relative;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
								white-space: nowrap;
								.cancle{
									width: 12rpx;
									height: 12rpx;
									position: absolute;
									right: -6rpx;
									top: 0rpx;
								}
							}
						}
					}
				}
				.uploadList{
					width: 100%;
					margin-top: 48rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.uploadItem{
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						image{
							width: 92rpx;
							height: 92rpx;
							margin-bottom: 14rpx;
						}
					}
				}
			}
		}
		.bottomList{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 5.5vh;
			display: flex;
			align-items: center;
			.subItem{
				width: 50%;
				height: 100%;
				box-sizing: border-box;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0;
			}
			.pre{
				background: rgba(50, 162, 56, 0.1);
				color: #32A238;
				border: 2rpx solid #32A238;
			}
			.next{
				background-color: #32A238;
				color: #FFFFFF;
			}
		}
		.nextBtn{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 5.5vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #32A238;
			color: #FFFFFF;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
		}
	}
	.popupBox{
		width: 750rpx;
		height: 357rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: white;
		width: 100%;
		margin-top: 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		padding-top: 60rpx;
		z-index: 100;
		.closeIcon{
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 32rpx;
			top: 32rpx;
		}
		.uploadItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			image{
				width: 92rpx;
				height: 92rpx;
				margin-bottom: 14rpx;
			}
		}
	}
}
</style>
